
{%include file="header.html" %}  

<div class="break"></div>

<div class="warp manage_page">

{%include file="user/user_manage_menu.html" menu='user_header' menu_detail='' %} 

<script src ="/js/jquery/jquery.js"></script>


<script type="text/javascript" src="/js/common/uploader.js"></script>

<script type="text/javascript">
$(function(){
	options={
		callback:'/js/uploader_callback.html',
		container:'#yxxiu_uploader',
		script:'/interface/common/json_pic_upload.php',
		size:"300|300",
		thumb:1,
		onComplete:function(res){
		buildAvatarEditor(res.pic);
	
					return ;
				},
		errorId:'#errormsg'
	};
	YOUXIXIU.ImgUploader.init(options);
});
</script>

<div class="manage_body">

<div class="manage_body_content">

	<h3>修改头像</h3>
	<div class="upload_userpic">
		<div id="yxxiu_uploader"></div>
		<div id="errormsg" style="color:red"></div>
		
		<div class="tips">仅支持JPG、GIF、PNG图片文件，且文件小于3M</div>
                                <div class="upload_orginal fl">
                                    <div id="picture_original" class="orginal_pic fl"></div>
                                    <div class="upload_tips">
                                        <strong class="f14">先择你要上传的头像方式</strong>
                                        <p>
                                         本地照片：选择一张本地的图片编辑后上传为头像<br>
                                         拍照上传：通过摄像头拍照编辑后上传为头像
                                         </p>
                                    </div>
                                </div>
                                <div class="upload_userimg fl">
                                    <div style="color:#AB692C; font-size:12px; padding-bottom:30px;">您上传的头像会自动生成三种尺寸，<br>请注意中小尺寸的头像是否清晰</div>
                                    <div class="upload_img180 fl">
                                        <div id="picture_180"><img width="180" height="180" src="{%$g_show.user_pic%}"></div>
                                        <div class="t_c f5">180像素 x 180像素</div>
                                    </div>
                                    <div class="upload_img50 fl">
                                        <div id="picture_50"><img width="50" height="50" src="{%$g_show.user_pic_middle%}"></div>
                                        <div class="t_c f5">50像素 x 50像素<br>（自动生成）</div>
                                        <br>
                                        <div id="picture_30"><img width="30" height="30" src="{%$g_show.user_pic_thumbnail%}"></div>
                                        <div class="t_c f5">30像素 x 30像素<br>（自动生成）</div>
                                    </div>
                                </div>
                            </div>	
	
	</div>

	<div class="upload_aftertips">
                                <strong style="" id="buttons">
                                    <input type="button" value="保存" id="save_btn" class="u_bnt upload_submit"> 
                                    <input type="button" value="取消" id="cancel_btn" class="u_bnt upload_reset"> 
                                </strong>
                                <span>
                                   
                                </span>
                    </div>

</div>


				
	
	
	

	
	
	
	



</div>
</div>

<div class="break"></div>
<div class="tucao_foot"></div>



<script src ="/js/common/user_message.js"></script>

<link href="http://res.yyets.com/css/jquery.jcrop.css" rel="stylesheet" type="text/css" />
<script src="/js/base/jquery.jcrop.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">

YOUXIXIU.MAIN.CheckMessage.init();


function buildAvatarEditor(pic_url)
{
	if(typeof(pic_url)=='undefined' || pic_url=='') return false;
	$('#upact').addClass('userpic_loading_bnt');
	$('#picture_original').html('<img  src="'+pic_url+'"/>');

	$('#picture_original img').load(function(){
		$('.upload_tips').hide();
		var cutter = new jQuery.AvatarCutter(
			{
				//主图片所在容器ID
				container : "picture_original",
				//缩略图配置,ID:所在容器ID;width,height:缩略图大小
				purviews : [{id:"picture_180",width:180,height:180},{id:"picture_50",width:50,height:50},{id:"picture_30",width:30,height:30}],
				//选择器默认大小
				selector : {width:180,height:180},
				//保存图片
				saveurl : '/interface/user/json_user_pic_edit.php'
			}
		);
		cutter.init();
		//
		$('#buttons').show();
		//确定按钮动作
		$("#save_btn").unbind();
		$("#cancel_btn").click(function(){ location = location; });
		$("#save_btn").click(
			function(){
		
				var data = cutter.submit();
				
			}
		);
	});


}




</script>






</body>

</html>   